import * as YvanUI from 'yvan-ui-wotu'
import CustomData from "./custom.data";

const _ = YvanUI.lodash

interface Input {
    $query?: string
    customercode?: string
    customername?: string
    province?: string
    city?: string
    zip?: string
    contact?: string
    telephone?: string
    address?: string
}

interface Ref {
    thegrid: YvanUI.Grid
}

interface Output {
    customerid: string
    customercode: string
    customername: string
    logogram: string
    industryclass: string
    customertype: string
    zip: string
    contact: string
    telephone: string
    province: string
    city: string
    address: string
    ownername: string
    isdefaultowner: string
    routeid: string
    routename: string
    isenable: string
    remark: string
}

export class SimpleWidget extends YvanUI.WidgetBase<Input, Output, Ref> {

    static define(option: YvanUI.WidgetDefine<Input, Output>) {
        return {
            content: SimpleWidget,
            ...option
        }
    }

    vjson = {
        title: '选择客户',
        view: 'widget',
        width: '60%',
        items: [
            {
                view: 'form',
                items: [
                    {
                        view: 'row',
                        items: [
                            {
                                view: 'col',
                                items: [
                                    {
                                        view: 'text',
                                        label: '查询条件',
                                        bind: 'inParamter.$query'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                view: 'grid',
                ff: 150,
                autoSizeColumns: false,
                idField: "customerid",
                ref: 'thegrid',
                dataSource: {
                    func: ({query}) => {
                        return new Promise(resolve => {
                            if (!query) {
                                return resolve(CustomData)
                            }

                            return resolve(CustomData.filter((row: any) => {
                                return (
                                    row.customername.indexOf(query) >= 0 ||
                                    row.contact.indexOf(query) >= 0 ||
                                    row.customerid.indexOf(query) >= 0 ||
                                    _.toUpper(row.logogram).indexOf(_.toUpper(query)) >= 0 ||
                                    row.customercode.indexOf(query) >= 0
                                );
                            }))
                        })
                    },
                    params: {
                        query: {$watch: () => this.inParamter.$query}
                    }
                },
                onDataSourceAfter: (sender: YvanUI.Grid, dataOrgin: any[], raw: any, api: any) => {
                    const offset = (sender.currentPage - 1) * sender.pageSize
                    const endOffset = (offset + sender.pageSize > dataOrgin.length) ? dataOrgin.length : offset + sender.pageSize
                    return {
                        pagination: {
                            current: sender.currentPage,
                            total: dataOrgin.length,
                            size: sender.pageSize
                        },
                        data: dataOrgin.slice(offset, endOffset)
                    }
                },
                columns: [
                    {field: "customerid", hidden: true},
                    {field: "customercode", title: "客户编号", width: 80},
                    {field: "customername", title: "客户名称", width: 120},
                    {field: "logogram", title: "助记码", width: 80},
                    {field: "industryclass", title: "客户类型", width: 100},
                    {field: "customertype", title: "客户类别", width: 100},
                    {field: "zip", title: "邮编", width: 80},
                    {field: "contact", title: "联系人", width: 80},
                    {field: "telephone", title: "电话", width: 80},
                    {field: "province", title: "省", width: 80},
                    {field: "city", title: "市", width: 80},
                    {field: "address", title: "地址", width: 100},
                    {field: "ownername", title: "所属货主", width: 100},
                    {field: "isdefaultowner", title: "是否默认货主", width: 120},
                    {field: "routeid", hidden: true},
                    {field: "routename", title: "线路名称", width: 120},
                    {field: "isenable", title: "是否启用", width: 100},
                    {field: "remark", title: "备注", width: 100},
                ],
                onRowDblClick: "onRowDblClick",
                onKeyDown: "onKeyDown"
            }
        ],
        footer: [
            {
                view: 'button',
                type: 'primary',
                icon: 'fa fa-save',
                text: '确认',
                onClick: "onButtonConfirmClick"
            },
            {
                view: 'button',
                icon: 'fa fa-times',
                text: '取消',
                onClick: () => {
                    this.close()
                }
            }
        ]
    }

    onButtonConfirmClick() {
        const row = this.refs.thegrid.getFocusedRow()
        if (!row) {
            YvanUI.showWarning('请选中一行数据')
            return
        }

        return this.confirm(row as Output)
    }

    onRowDblClick(sender: YvanUI.Grid, data: any) {
        this.confirm(data)
    }

    onKeyDown(sender: YvanUI.Grid, param: any) {
        const KEY_ENTER = 13

        if (param.event.keyCode === KEY_ENTER) {
            param.event.stopPropagation()
            param.event.preventDefault()
            this.onButtonConfirmClick()
            return true
        }
    }
}